/* eslint no-console:0 */
import React, {Component} from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';

import InputNumber from './InputNumber';


export default class InputNumberDemo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      disabled: false,
      readOnly: false,
      value: 5,
    };
  }

  onChange = (v) => {
    console.log('onChange:', v);
    this.setState({
      value: v,
    });
  }

  toggleDisabled = () => {
    this.setState({
      disabled: !this.state.disabled,
    });
  }

  toggleReadOnly = () => {
    this.setState({
      readOnly: !this.state.readOnly,
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.stepper}>
          <InputNumber
            min={-8}
            max={10}
            precision={1}//保留的小数点位数
            value={this.state.value}
            style={{backgroundColor: 'white', paddingHorizontal: 10}}
            readOnly={this.state.readOnly}
            onChange={this.onChange}
            disabled={this.state.disabled}
            keyboardType={Platform.OS === 'ios' ? 'number-pad' : 'numeric'}
          />
        </View>
        <View style={styles.buttons}>
          <TouchableOpacity
            style={styles.buttonWrap}
            onPress={this.toggleDisabled}>

            <Text style={styles.buttonText}>toggle Disabled</Text>

          </TouchableOpacity>
          <TouchableOpacity
            onPress={this.toggleReadOnly}
            style={styles.buttonWrap}>
            <Text style={styles.buttonText}>toggle readOnly</Text>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5F5F5',
  },
  stepper: {
    height: 44,
    marginTop: 100,
    paddingHorizontal: 10,
  },
  buttons: {
    marginTop: 40,
    flexDirection: 'row',
    justifyContent: 'center',
  },
  buttonWrap: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 8,
    alignItems:'center',
  },
  buttonText: {
    color: 'red'
  }
});
